<!DOCTYPE html>
<html lang="zh-CN" data-theme="corporate">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevOps日志管理 - 实时日志查看</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <style>
        .log-container {
            background: #1a1a1a;
            color: #00ff00;
            font-family: 'Courier New', monospace;
            height: 500px;
            overflow-y: auto;
            border-radius: 8px;
            padding: 16px;
        }
        .log-line {
            margin-bottom: 4px;
            white-space: pre-wrap;
            word-break: break-all;
        }
        .log-error {
            color: #ff6b6b;
        }
        .log-warning {
            color: #ffd93d;
        }
        .log-info {
            color: #74c0fc;
        }
        .log-success {
            color: #51cf66;
        }
        .log-debug {
            color: #868e96;
        }
        .filter-badge {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .filter-badge:hover {
            transform: scale(1.05);
        }
        .auto-scroll {
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .search-highlight {
            background-color: yellow;
            color: black;
            padding: 1px 2px;
            border-radius: 2px;
        }
    </style>
</head>
<body class="bg-base-100">
    <div id="logApp">
        <!-- 顶部导航 -->
        <div class="navbar bg-base-100 shadow-lg">
            <div class="navbar-start">
                <a href="dashboard.html" class="btn btn-ghost text-xl">
                    <i class="fas fa-arrow-left mr-2"></i>
                    返回仪表板
                </a>
            </div>
            <div class="navbar-center">
                <h1 class="text-2xl font-bold">DevOps日志管理</h1>
            </div>
            <div class="navbar-end">
                <div class="flex items-center space-x-4">
                    <div class="form-control">
                        <label class="label cursor-pointer">
                            <span class="label-text mr-2">自动滚动</span>
                            <input type="checkbox" class="toggle toggle-primary" v-model="autoScroll">
                        </label>
                    </div>
                    <button class="btn btn-primary btn-sm" @click="clearLogs">
                        <i class="fas fa-trash mr-2"></i>
                        清空日志
                    </button>
                </div>
            </div>
        </div>

        <div class="container mx-auto px-4 py-6">
            <!-- 控制面板 -->
            <div class="card bg-base-100 shadow-xl mb-6">
                <div class="card-body">
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <!-- 服务选择 -->
                        <div>
                            <h3 class="font-bold mb-3">
                                <i class="fas fa-server text-primary mr-2"></i>
                                选择服务
                            </h3>
                            <select class="select select-bordered w-full" v-model="selectedService" @change="loadServiceLogs">
                                <option value="all">所有服务</option>
                                <option value="jenkins">Jenkins</option>
                                <option value="kubernetes">Kubernetes</option>
                                <option value="harbor">Harbor</option>
                                <option value="prometheus">Prometheus</option>
                                <option value="grafana">Grafana</option>
                                <option value="nginx">Nginx</option>
                            </select>
                        </div>

                        <!-- 日志级别过滤 -->
                        <div>
                            <h3 class="font-bold mb-3">
                                <i class="fas fa-filter text-secondary mr-2"></i>
                                日志级别
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                <div class="badge badge-error filter-badge" 
                                     :class="{'badge-outline': !logLevels.error}" 
                                     @click="toggleLogLevel('error')">
                                    ERROR
                                </div>
                                <div class="badge badge-warning filter-badge" 
                                     :class="{'badge-outline': !logLevels.warning}" 
                                     @click="toggleLogLevel('warning')">
                                    WARN
                                </div>
                                <div class="badge badge-info filter-badge" 
                                     :class="{'badge-outline': !logLevels.info}" 
                                     @click="toggleLogLevel('info')">
                                    INFO
                                </div>
                                <div class="badge badge-success filter-badge" 
                                     :class="{'badge-outline': !logLevels.success}" 
                                     @click="toggleLogLevel('success')">
                                    SUCCESS
                                </div>
                                <div class="badge badge-ghost filter-badge" 
                                     :class="{'badge-outline': !logLevels.debug}" 
                                     @click="toggleLogLevel('debug')">
                                    DEBUG
                                </div>
                            </div>
                        </div>

                        <!-- 搜索 -->
                        <div>
                            <h3 class="font-bold mb-3">
                                <i class="fas fa-search text-accent mr-2"></i>
                                搜索日志
                            </h3>
                            <div class="join w-full">
                                <input class="input input-bordered join-item flex-1" 
                                       placeholder="输入关键词搜索..." 
                                       v-model="searchKeyword"
                                       @input="searchLogs">
                                <button class="btn btn-primary join-item" @click="searchLogs">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 日志统计 -->
            <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
                <div class="stat bg-base-100 shadow rounded-lg">
                    <div class="stat-figure text-error">
                        <i class="fas fa-exclamation-triangle text-2xl"></i>
                    </div>
                    <div class="stat-title">错误</div>
                    <div class="stat-value text-error">{{ logStats.error }}</div>
                </div>
                <div class="stat bg-base-100 shadow rounded-lg">
                    <div class="stat-figure text-warning">
                        <i class="fas fa-exclamation-circle text-2xl"></i>
                    </div>
                    <div class="stat-title">警告</div>
                    <div class="stat-value text-warning">{{ logStats.warning }}</div>
                </div>
                <div class="stat bg-base-100 shadow rounded-lg">
                    <div class="stat-figure text-info">
                        <i class="fas fa-info-circle text-2xl"></i>
                    </div>
                    <div class="stat-title">信息</div>
                    <div class="stat-value text-info">{{ logStats.info }}</div>
                </div>
                <div class="stat bg-base-100 shadow rounded-lg">
                    <div class="stat-figure text-success">
                        <i class="fas fa-check-circle text-2xl"></i>
                    </div>
                    <div class="stat-title">成功</div>
                    <div class="stat-value text-success">{{ logStats.success }}</div>
                </div>
                <div class="stat bg-base-100 shadow rounded-lg">
                    <div class="stat-figure text-base-content">
                        <i class="fas fa-bug text-2xl"></i>
                    </div>
                    <div class="stat-title">调试</div>
                    <div class="stat-value">{{ logStats.debug }}</div>
                </div>
            </div>

            <!-- 日志显示区域 -->
            <div class="card bg-base-100 shadow-xl">
                <div class="card-body">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="card-title">
                            <i class="fas fa-terminal text-primary mr-2"></i>
                            实时日志 - {{ selectedService === 'all' ? '所有服务' : selectedService.toUpperCase() }}
                        </h2>
                        <div class="flex items-center space-x-2">
                            <div class="badge badge-primary">
                                共 {{ filteredLogs.length }} 条日志
                            </div>
                            <button class="btn btn-sm btn-secondary" @click="downloadLogs">
                                <i class="fas fa-download mr-2"></i>
                                下载日志
                            </button>
                        </div>
                    </div>
                    
                    <div class="log-container" ref="logContainer">
                        <div v-for="log in filteredLogs" 
                             :key="log.id" 
                             :class="['log-line', `log-${log.level}`]"
                             class="auto-scroll">
                            <span class="text-gray-400">[{{ log.timestamp }}]</span>
                            <span class="text-blue-300">[{{ log.service.toUpperCase() }}]</span>
                            <span :class="`log-${log.level}`">[{{ log.level.toUpperCase() }}]</span>
                            <span v-html="highlightSearch(log.message)"></span>
                        </div>
                        <div v-if="filteredLogs.length === 0" class="text-center text-gray-500 mt-10">
                            <i class="fas fa-inbox text-4xl mb-4"></i>
                            <p>暂无日志数据</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="card bg-base-100 shadow-xl mt-6">
                <div class="card-body">
                    <h2 class="card-title">
                        <i class="fas fa-tools text-warning mr-2"></i>
                        快速操作
                    </h2>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <button class="btn btn-outline btn-primary" @click="exportErrorLogs">
                            <i class="fas fa-file-export mr-2"></i>
                            导出错误日志
                        </button>
                        <button class="btn btn-outline btn-secondary" @click="analyzePerformance">
                            <i class="fas fa-chart-line mr-2"></i>
                            性能分析
                        </button>
                        <button class="btn btn-outline btn-accent" @click="generateReport">
                            <i class="fas fa-file-alt mr-2"></i>
                            生成报告
                        </button>
                        <button class="btn btn-outline btn-info" @click="alertSettings">
                            <i class="fas fa-bell mr-2"></i>
                            告警设置
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    selectedService: 'all',
                    autoScroll: true,
                    searchKeyword: '',
                    logLevels: {
                        error: true,
                        warning: true,
                        info: true,
                        success: true,
                        debug: true
                    },
                    logs: [],
                    logStats: {
                        error: 0,
                        warning: 0,
                        info: 0,
                        success: 0,
                        debug: 0
                    }
                }
            },
            computed: {
                filteredLogs() {
                    let filtered = this.logs.filter(log => {
                        // 服务过滤
                        if (this.selectedService !== 'all' && log.service !== this.selectedService) {
                            return false;
                        }
                        
                        // 日志级别过滤
                        if (!this.logLevels[log.level]) {
                            return false;
                        }
                        
                        // 搜索关键词过滤
                        if (this.searchKeyword && !log.message.toLowerCase().includes(this.searchKeyword.toLowerCase())) {
                            return false;
                        }
                        
                        return true;
                    });
                    
                    return filtered.slice(-1000); // 只显示最新的1000条日志
                }
            },
            mounted() {
                this.initializeLogs();
                this.startLogSimulation();
            },
            methods: {
                initializeLogs() {
                    // 初始化一些示例日志
                    const sampleLogs = [
                        { service: 'jenkins', level: 'info', message: 'Jenkins服务启动完成' },
                        { service: 'kubernetes', level: 'success', message: 'Pod deployment-web-7d4f8c9b8d-x7k2m 创建成功' },
                        { service: 'harbor', level: 'info', message: '镜像 myapp:v1.2.3 推送完成' },
                        { service: 'prometheus', level: 'warning', message: 'CPU使用率超过80%阈值' },
                        { service: 'grafana', level: 'info', message: '仪表板更新完成' },
                        { service: 'nginx', level: 'error', message: '上游服务器连接失败: 502 Bad Gateway' },
                        { service: 'jenkins', level: 'success', message: '构建任务 #123 执行成功' },
                        { service: 'kubernetes', level: 'debug', message: 'Scheduler调度Pod到节点 worker-01' },
                        { service: 'harbor', level: 'info', message: '垃圾回收任务开始执行' },
                        { service: 'prometheus', level: 'error', message: '无法连接到目标 http://api-service:8080/metrics' }
                    ];
                    
                    sampleLogs.forEach((log, index) => {
                        this.addLog(log.service, log.level, log.message);
                    });
                    
                    this.updateLogStats();
                },
                startLogSimulation() {
                    // 模拟实时日志生成
                    setInterval(() => {
                        this.generateRandomLog();
                    }, 3000);
                },
                generateRandomLog() {
                    const services = ['jenkins', 'kubernetes', 'harbor', 'prometheus', 'grafana', 'nginx'];
                    const levels = ['info', 'warning', 'error', 'success', 'debug'];
                    const messages = [
                        '服务健康检查通过',
                        '新的构建任务已排队',
                        '容器重启完成',
                        '内存使用率: 75%',
                        '数据库连接池已满',
                        '缓存清理完成',
                        '用户认证成功',
                        'API调用频率过高',
                        '备份任务执行中',
                        '配置文件重新加载'
                    ];
                    
                    const service = services[Math.floor(Math.random() * services.length)];
                    const level = levels[Math.floor(Math.random() * levels.length)];
                    const message = messages[Math.floor(Math.random() * messages.length)];
                    
                    this.addLog(service, level, message);
                    this.updateLogStats();
                    
                    if (this.autoScroll) {
                        this.$nextTick(() => {
                            const container = this.$refs.logContainer;
                            if (container) {
                                container.scrollTop = container.scrollHeight;
                            }
                        });
                    }
                },
                addLog(service, level, message) {
                    const log = {
                        id: Date.now() + Math.random(),
                        timestamp: new Date().toLocaleString('zh-CN'),
                        service: service,
                        level: level,
                        message: message
                    };
                    
                    this.logs.push(log);
                    
                    // 保持日志数量在合理范围内
                    if (this.logs.length > 5000) {
                        this.logs = this.logs.slice(-3000);
                    }
                },
                updateLogStats() {
                    this.logStats = {
                        error: this.logs.filter(log => log.level === 'error').length,
                        warning: this.logs.filter(log => log.level === 'warning').length,
                        info: this.logs.filter(log => log.level === 'info').length,
                        success: this.logs.filter(log => log.level === 'success').length,
                        debug: this.logs.filter(log => log.level === 'debug').length
                    };
                },
                toggleLogLevel(level) {
                    this.logLevels[level] = !this.logLevels[level];
                },
                loadServiceLogs() {
                    // 模拟加载特定服务的日志
                    console.log(`加载 ${this.selectedService} 服务的日志`);
                },
                searchLogs() {
                    // 搜索功能已通过computed属性实现
                    console.log(`搜索关键词: ${this.searchKeyword}`);
                },
                highlightSearch(text) {
                    if (!this.searchKeyword) return text;
                    
                    const regex = new RegExp(`(${this.searchKeyword})`, 'gi');
                    return text.replace(regex, '<span class="search-highlight">$1</span>');
                },
                clearLogs() {
                    if (confirm('确定要清空所有日志吗？')) {
                        this.logs = [];
                        this.updateLogStats();
                    }
                },
                downloadLogs() {
                    const logText = this.filteredLogs.map(log => 
                        `[${log.timestamp}] [${log.service.toUpperCase()}] [${log.level.toUpperCase()}] ${log.message}`
                    ).join('\n');
                    
                    const blob = new Blob([logText], { type: 'text/plain' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `devops-logs-${new Date().toISOString().split('T')[0]}.txt`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                },
                exportErrorLogs() {
                    const errorLogs = this.logs.filter(log => log.level === 'error');
                    const logText = errorLogs.map(log => 
                        `[${log.timestamp}] [${log.service.toUpperCase()}] ${log.message}`
                    ).join('\n');
                    
                    const blob = new Blob([logText], { type: 'text/plain' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `error-logs-${new Date().toISOString().split('T')[0]}.txt`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                },
                analyzePerformance() {
                    alert('性能分析功能开发中...');
                },
                generateReport() {
                    alert('正在生成日志分析报告...');
                },
                alertSettings() {
                    alert('告警设置功能开发中...');
                }
            }
        }).mount('#logApp');
    </script>
</body>
</html>